@extends('layouts.console_header')

@section('title', '代理收款账号管理')

@section('resources')
    @parent
<style>
    nav{height: 50px;line-height: 50px;}
    nav a,nav span{margin-left: 20px;}
    nav input{margin-left: 20px;height: 28px;border: 1px solid #000;margin-top: 10px;}
    .agent_receivable_menage{position: fixed;top: 200px;left: 50%;width: 500px;margin-left: -250px;border: 1px solid #000;background-color: #fff;display: none;}
    .agent_receivable_menage_close{width: 30px;position: absolute;top: 10px;right: 10px;}
    .agent_receivable_menage .title p{font-size: 20px;height: 50px;line-height: 50px;text-align: center;width: 100%;}
    .agent_receivable_menage .no_edit_message{overflow: hidden;margin: 20px 0;}
    .agent_receivable_menage .no_edit_message li{float: left;width: 30%;color: #808080;margin-left: 5%;}
    .agent_receivable_menage .edit_message li{overflow: hidden;margin: 20px 0;}
    .agent_receivable_menage .edit_message li span{float: left;margin-left: 20px;width: 100px;text-align: right;}
    .agent_receivable_menage .edit_message li input{float: left;margin-left: 10px;border: 1px solid #808080;width: 200px;height: 25px;}
    .agent_receivable_menage .edit_message li select{float: left;margin-left: 10px;border: 1px solid #808080;width: 150px;height: 25px;}
    .agent_receivable_menage .preserve_agent_menage{width: 110px;height: 40px;background-color: #9955c6;border-radius: 5px;color: #fff;float: right;margin-right: 20px;font-size: 20px;}
    .agent_receivable_menage .cancel_agent_menage{width: 110px;height: 40px;background-color: #999;border-radius: 5px;color: #fff;float: left;margin-right: 20px;font-size: 20px;}
    .agent_receivable_menage .button{margin: 30px 20px;overflow: hidden;}
</style>
@endsection

@section('content')
<!--  html内容  -->
<section class="user_list">
	<div style="border-bottom: 2px solid #9955c6;overflow: hidden;">
		<p class="fz_14 account_title fl" style="border: none;">
		<span style="color: #7f7f7f;"><a href="/console/index">首页</a>>财务中心></span>
		<span class="co_violet">代理商收款账号管理</span></p>
		<a href="/console/finance/agent/shopwaitwithdrawal/collectionAccount/export?cityid={{$cityid}}"><p class="fr tc back_btn">导出</p></a>
	</div>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>序号</th>
                <th>编码</th>
                <th>代理区域</th>
                <th>持卡人</th>
                <th>银行卡号</th>
                <th>银行名称</th>
                <th>开户行名称信息</th>
                <th style="width: 100px;">操作</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>序号</th>
                <th>编码</th>
                <th>代理区域</th>
                <th>持卡人</th>
                <th>银行卡号</th>
                <th>银行名称</th>
                <th>开户行名称信息</th>
                <th style="width: 100px;">操作</th>
            </tr>
        </tfoot>
        <tbody>
            @foreach($lists as $list)
                <tr>
                    @if(!isset($i))
                        <td>{{$i=1}}</td>
                    @else
                        <td>{{++$i}}</td>
                    @endif
                    <td>{{$list['adminid']}}</td>
                    <td>{{$list['cityname']}}</td>
                    <td>{{$list['cardholder']}}</td>
                    <td>{{$list['bankcard']}}</td>
                    <td>{{$list['bankname']}}</td>
                    <td>{{$list['bankprovince']}} - {{$list['bankcity']}} - {{$list['opencardbank']}}</td>
                    <td>
                        <input type="hidden" value="{{$list['bankprovince']}}" id="bankprovince">
                        <input type="hidden" value="{{$list['bankcity']}}" id="bankcity">
                        <input type="hidden" value="{{$list['opencardbank']}}" id="opencardbank">
                        <a class="co_violet" style="margin-right: 10px;" href="#" onclick="editCheques(this)">编辑</a>
                        {{--<a class="co_violet" href="/console/finance/agent/message">查看</a>--}}
                    </td>
                </tr>
            @endforeach;
        </tbody>
    </table>
</section>
<form class="agent_receivable_menage" action="" method="" id="agent_receivable_menage_form">
    <div class="title oh">
        <p class="fl">修改收款账号</p>
        <img class="agent_receivable_menage_close" src="{{env('IMAGE_DOMAIN')}}images/close_p.png" alt="">
    </div>
    <ul class="no_edit_message">
        <li>编码：<span id="number_admin"></span></li>
        <li>代理城市：<span id ="city_admin"></span></li>
    </ul>
    <ul class="edit_message">
        <li>
            <span>持卡人：</span>
            <input type="text" name="cardholder" value="" id="cardholder_admin">
        </li>
        <li>
            <span>银行卡号：</span>
            <input type="text" name="bankcard" value="" id="bankcard_admin">
        </li>
        <li>
            <span>银行名称：</span>
            <input style="width: 50px;border-radius: 5px;" type="button" name="" value="查询" onclick="getbankname()">
            <input type="text" name="bankname" value="" id="bankname_admin">
        </li>
        <li>
            <span>开户行信息：</span>
            <select name="bankprovince" id="Tobankprovince"  onchange="showBusinessArea(this)">
                <option value="">请选择所在省</option>
                @foreach($bankprovince as $value)
                    <option value="{{$value}}">{{$value}}</option>
                @endforeach;
            </select>
            <input type="hidden" name="hiddenProvince" value="">
            <select name="bankcity" id="bank_city_name">
                <option value="">请选择所在市</option>
            </select>
            <input type="hidden" name="hiddenCity" value="">
            <input style="margin: 20px 0 0 130px;" type="text" name="opencardbank" value="" placeholder="请输入开户行支行名称" id="opencardbank_admin">
        </li>
    </ul>
    <p class="button">
        <input type="hidden" value="" id="formbankprovince">
        <input type="hidden" value="" id="formbankcity">
        <input type="hidden" value="" id="formopencardbank">
        <input type="hidden" name="adminid" value="">
        <input type="hidden" name="cityid" value="{{$cityid}}">
        <input class="cancel_agent_menage cancel_edit" type="button" name="" value="取消">
        <input class="preserve_agent_menage" id = "submit_preserve_agent_menage" type="button" name="" value="确定">
    </p>
</form>
@endsection

@section('scriptResources')
    @parent
    <script>
        var cityid= '{{$cityid}}';
        $(".agent_receivable_menage_close").click(function(){
            $(".agent_receivable_menage").hide();
        });
        $(".cancel_edit").click(function(){
            $(".agent_receivable_menage").hide();
        });
        function editCheques(obj){
            var number_admin = $(obj).parent().prev().prev().prev().prev().prev().prev().text();
            $("#number_admin").text(number_admin);
            $("input[name='adminid']").val(number_admin);
            var city_admin = $(obj).parent().prev().prev().prev().prev().prev().text();
            $("#city_admin").text(city_admin);
            var cardholder_admin = $(obj).parent().prev().prev().prev().prev().text();
            $("#cardholder_admin").val(cardholder_admin);
            var bankcard_admin = $(obj).parent().prev().prev().prev().text();
            $("#bankcard_admin").val(bankcard_admin);
            var bankname_admin = $(obj).parent().prev().prev().text();
            $("#bankname_admin").val(bankname_admin);
            var province_admin = $(obj).prev().prev().prev().val();
            $('input[name="hiddenProvince"]').val(province_admin);
            $("#formbankprovince").val(province_admin);
            var cityid_admin = $(obj).prev().prev().val();
            $('input[name="hiddenCity"]').val(cityid_admin);
            $("#formbankcity").val(cityid_admin);
            var opencardbank_admin = $(obj).prev().val();
            $("#opencardbank_admin").val(opencardbank_admin);
            $("#Tobankprovince option[value='"+province_admin+"']").attr("selected", true); //设置Select的Text值为jQuery的项选中
            var getProvinceName = new Array();
            getProvinceName.value = province_admin;
            showBusinessArea(getProvinceName);
            $(".agent_receivable_menage").show();
        }

        //通过绑定change事件，当下拉框内容发生变化时事件被启动provincename
        $("#Tobankprovince").bind("change",function(){
            //获取被选中的option的值
            var miaoshu = $(this).val();
            //获取自定义属性的值
            var bianhao = $(this).find("option:selected").attr("value");
            $("input[name='hiddenProvince']").val(bianhao);
        });

        //通过绑定change事件，当下拉框内容发生变化时事件被启动cityname
        $("#bank_city_name").bind("change",function(){
            //获取被选中的option的值
            var miaoshu = $(this).val();
            //获取自定义属性的值
            var bianhao = $(this).find("option:selected").attr("value");
            $("input[name='hiddenCity']").val(bianhao);
        });

        function showBusinessArea(obj){
            var province_name = obj.value;
            if(province_name != ''){
                var form_city_name = $("#formbankcity").val();
                $.ajax({
                    url : '/console/finance/agent/receivable/manage',
                    data:{"provincename":province_name, 'cityid':cityid},
                    dataType:'json',
                    success:function(data){
                        if(data.status == 'success') {
                            var data = data.data;
                            var areastring = '<option value="">--请选择所在市--</option>';
                            if(data.length >0){
                                for(var i=0; i<data.length; i++) {
                                    var list = data[i];
                                    if(list == form_city_name){
                                        var option_selected = 'selected="selected"';
                                    }else{
                                        var option_selected = '';
                                    }
                                    areastring += '<option value="' + list +'" '+option_selected+'>' + list + '</option>';
                                }
                            }
                            $("#bank_city_name").html(areastring);
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    }
                });
            }
        }

        $("#submit_preserve_agent_menage").click(function(){
            var data = $('#preserve_agent_menage_form').serialize();
            $.ajax({
                url : '/console/finance/agent/receivable/manage/edit',
                type : 'post',
                data: $('#agent_receivable_menage_form').serialize(),
                dataType:'json',
                success:function(data){
                    if(data.status == 'success') {
                        alert("保存成功")
                        window.location.href = '/console/finance/agent/receivable/manage?cityid='+cityid;
                    } else {
                        alert(data.message);
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
            });
        });

        //获取银行名称
        function getbankname(){
            var bankcard = $("input[name='bankcard']").val();
            if(bankcard == '') {
                alert('银行卡不能为空');
            }
            $.ajax({
                url : '/console/bankname/get',
                data:{"bankcard":bankcard},
                dataType:'json',
                success:function(data){
                    if(data.status == 'success') {
                        var bankname = data.data;
                        $("input[name='bankname']").val(bankname);
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
            });
        }
        
    </script>
@endsection